<template>
  <!-- 评论列表 -->
  <div class="comment-list">
    <div class="comment-item" v-for="item in list" :key="item.id">
      <div class="flex-align" @click="$emit('open')">
        <img class="avatar" :src="item.user.avatar" />
        <div style="flex: 1">
          <span class="nickname">{{ item.user.nickname }}：</span>
          <span class="content">{{ item.content }}</span>
        </div>
        <div class="thumb">
          <img class="icon" src="../assets/images/icon-thumb.png" />
          <p>{{ item.likeCount }}</p>
        </div>
      </div>
      <div class="reply-comment-list">
        <div class="comment-time">
          <span class="time">{{ item.createdAt }}</span>
          <span @click="$emit('open')">回复</span>
        </div>
        <div v-for="sub in item.topReplyList" :key="sub.id">
          <div class="flex-align">
            <img class="avatar" :src="sub.user.avatar" />
            <div style="flex: 1">
              <span class="nickname">{{ sub.user.nickname }}：</span>
              <span class="content">{{ sub.content }}</span>
            </div>
            <div class="thumb" @click="$emit('open')">
              <img class="icon" src="../assets/images/icon-thumb.png" />
              <p>{{ sub.likeCount }}</p>
            </div>
          </div>
          <div class="comment-time">
            <span class="time">{{ sub.createdAt }}</span>
            <span @click="$emit('open')">回复</span>
          </div>
        </div>
        <div class="end flex-align" v-if="item.replyCount > 3">
          <div></div>
          查看全部 {{ item.replyCount }} 条回复
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
      },
    },
    data() {
      return {
        img:
          'https://jimu-dev-pub.oss-cn-shanghai.aliyuncs.com/image/1234/F10A30C428624FFEA0ABA30C1222A40B.png',
      };
    },
  };
</script>

<style lang="less">
  .comment-list {
    color: #cccccc;
    font-size: 2.8rem;
    .avatar {
      width: 6rem;
      height: 6rem;
      border-radius: 50%;
      flex: none;
      margin-right: 1.5rem;
    }
    .comment-item {
      margin-bottom: 3rem;
      .nickname {
        font-weight: bold;
        span {
          font-weight: normal;
        }
      }
      .thumb {
        font-size: 2.1rem;
        color: #888888;
        text-align: center;
        .icon {
          width: 4.4rem;
          height: 4.4rem;
        }
      }
      .comment-time {
        font-size: 2.4rem;
        color: #cccccc;
        margin-top: 2rem;
        margin-bottom: 3rem;
        line-height: 4rem;
        .time {
          margin-right: 2.8rem;
          color: #888888;
        }
      }
      .reply-comment-list {
        margin-left: 7.8rem;
        .end {
          div {
            width: 8rem;
            height: 0.1rem;
            background: #888888;
            margin-right: 1rem;
          }
          font-size: 2.4rem;
          font-weight: 400;
          color: #cccccc;
          line-height: 4rem;
        }
      }
    }
  }
</style>
